<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <h1>生命周期</h1>
      <p>count---{{count}}</p>
      <button @click="count++">change</button>
    </div>
    <script>
      /* 
      更新阶段:
        * 当响应式数据改变的时候,进入更新流程
        * `【beforeUpdate】`: 数据改变后,视图更新前
        * 更新:得到新的虚拟DOM并使用patch函数进行diff算法比较后更新真实DOM
        *  `【updated】`: 数据改变后,视图也更新后
        
    */
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            count: 0,
          };
        },
        beforeCreate() {
          console.log(".....beforeCreate.....", this, this.count);
          // debugger;
        },
        created() {
          console.log(".....created.....", this, this.count);
          // debugger;
        },
        beforeMount() {
          console.log("-----beforeMount------");
          // debugger;
        },
        mounted() {
          console.log("-----beforeMount------");
          // debugger;
        },
        beforeUpdate() {
          console.log("-----beforeUpdate------", this);
          debugger;
        },
        updated() {
          console.log("-----updated------");
          debugger;
        },
      });
    </script>
  </body>
</html>
